import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { connect } from 'umi'
import "antd/dist/antd.css";
import { Row, Col, Input, Space, Button, Popover } from "antd";
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'
import { DeleteOutlined, CloseOutlined } from "@ant-design/icons";
import './index.less'
const FormList = (props) => {
  const { list, handleList, label = '标签' } = props
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState('')
  useEffect(() => {
    if (!open) {
      setValue('')
    }
  }, [open])
  const handleOpenChange = (newOpen) => {
    setOpen(newOpen);
  };
  return (
    <Space style={{ width: '100%' }} direction='vertical'>
      {
        list.map((item, index) => {
          return <Row key={index}>
            <Col className="FormList_label" span={6} style={{ paddingRight: 8, textAlign: 'right', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}><label>{label}{index + 1}:</label></Col>
            <Col span={8}><Input value={item} onChange={(e) => {
              handleList({
                index: index,
                value: e.target.value,
                type: 'edit'
              })
            }} placeholder={`请输入${label}`} /></Col>
            <Col style={{ marginLeft: 8, display: 'flex', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}><PlusCircleOutlined onClick={() => {
              handleList({ type: 'add' })
            }}></PlusCircleOutlined></Col>
            {list.length <= 1 ? null : <Col style={{ marginLeft: 8, display: 'flex', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}><MinusCircleOutlined onClick={() => handleList({ type: 'remove', index })}></MinusCircleOutlined></Col>}
          </Row>
        })
      }
      <Row>
        <Col span={6} style={{ paddingRight: 8, textAlign: 'right', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
          <Popover open={open}
            onOpenChange={handleOpenChange} title={`每行可输入一个${label}，回车键可换行`} placement="bottom" content={
              <div>
                <Input.TextArea
                  value={value}
                  showCount={false}
                  rows={5}
                  placeholder={`每行可输入一个${label}，回车键可换行`}
                  onChange={(e) => {
                    setValue(e.target.value)
                  }}
                />
                <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between' }}>
                  <div></div>
                  <Button onClick={() => {
                    setOpen(() => {
                      handleList({ type: 'all', value: value })
                      return false
                    })
                  }}>确定</Button>
                </div>
              </div>
            } trigger="click">
            <Button type='link' onClick={() => {
              handleOpenChange(true)
            }}>批量</Button>
          </Popover></Col>
      </Row>
    </Space >


  );
};
export default connect(({ behaviorEecord, loading }) => ({
  loading: loading.models.behaviorEecord,
}))(FormList);
